<!--
 * @Author: 王灿
 * @Date: 2019-11-28 08:37:58
 * @LastEditTime : 2019-12-19 10:20:07
 * @Description: 课程模板操作
 * @FilePath: \scarlet-sparrow-admin\src\views\course\course-template\index.vue
 -->
<template>
  <happy-scroll color="rgba(0,0,0,0)" size="5" :resize="true" class="course-template">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rule">
      <!-- 课程主题 -->
      <el-form-item prop="theme">
        <el-row>
          <el-input v-model="ruleForm.theme" placeholder="课程主题" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 上传组件 课程主图 -->
      <!-- <el-form-item>
        <el-row>
          <jq-upload :upData="picObj" :fileList="fileList" @onChangeImageKey="onChangeImageKey" />
        </el-row>
      </el-form-item> -->
      <!-- 课程介绍 -->
      <el-form-item prop="courseExplain">
        <el-row>
          <el-input v-model="ruleForm.courseExplain" placeholder="课程介绍" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 主持人 -->
      <el-form-item prop="host" style="margin-bottom: 30px;">
        <el-row>
          <el-input v-model="ruleForm.host" placeholder="主持人" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 主持人头像 -->
        <el-form-item prop="headPortrait">
          <jq-upload :upData="picObj" :fileList="fileList" @onChangeImageKey="onChangeImageKey" />
        </el-form-item>
      <!-- 主持人介绍 -->
      <el-form-item prop="hostIntroduce">
        <el-row>
          <el-input v-model="ruleForm.hostIntroduce" placeholder="主持人介绍" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 开课地址 -->
      <!-- <el-form-item prop="province">
        <el-row>
          <el-cascader
            size="large"
            placeholder="请选择开课地址"
            :options="options"
            v-model="selectedOptions"
            @change="onHandleChange"
          ></el-cascader>
        </el-row>
      </el-form-item> -->
      <!-- 详细地址 -->
      <!-- <el-form-item prop="detailedAddress">
        <el-row>
          <el-input v-model="ruleForm.detailedAddress" placeholder="详细地址" clearable></el-input>
        </el-row>
      </el-form-item> -->
      <el-form-item class="dialog-footer">
        <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
        <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
      </el-form-item>
    </el-form>
  </happy-scroll>
</template>

<script>
import dayjs from 'dayjs'
import JqUpload from '@/components/jq-upload/index.vue'
import { getModularCreate, getModularUpdate } from '@/api/course.js'
import { getDownUrl } from '@/api/commodity.js'
// import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  name: 'CourseTemplate',
  components: { JqUpload },
  props: {
    // 默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      fileList: [],
      defaultValue: [],
      ruleForm: {
        id: '',
        theme: '',
        mainPic: '',
        courseExplain: '',
        host: '',
        headPortrait: '',
        hostIntroduce: ''
      },
      rule: {
        theme: [{ required: true, message: '请输入课程主题', trigger: 'blur' }],
        courseExplain: [
          { required: true, message: '请输入课程介绍', trigger: 'blur' }
        ],
        host: [
          { required: true, message: '请输入主持人姓名', trigger: 'blur' }
        ],
        headPortrait: [
          { required: true, message: '请上传主持人头像', trigger: 'blur' }
        ],
        hostIntroduce: [
          { required: true, message: '请输入主持人介绍', trigger: 'blur' }
        ],
        detailedAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        // province: [
        //   { required: true, message: '请选择开课地址', trigger: 'blur' }
        // ]
      },
      picObj: {
        label: '主讲人头像',
        accept: 'image/png, image/gif, image/jpg, image/jpeg',
        limit: 1,
        type: 1,
        isImage: true
      },
      // options: regionData,
      // selectedOptions: []
    }
  },
  watch: {
    // 获取默认数据
    row() {
      this.onGetRow()
    }
  },
  created() {
    this.onGetRow()
  },
  methods: {
    // 默认数据
    onGetRow() {
      let boolean = JSON.stringify(this.row) !== '{}'
      this.ruleForm.id = boolean ? this.row.id : ''
      this.ruleForm.theme = boolean ? this.row.theme : ''
      this.ruleForm.headPortrait = boolean ? this.row.headPortrait : ''
      this.ruleForm.courseExplain = boolean ? this.row.courseExplain : ''
      this.ruleForm.host = boolean ? this.row.host : ''
      this.ruleForm.hostIntroduce = boolean ? this.row.hostIntroduce : ''
      // this.ruleForm.province = boolean ? this.row.province : ''
      // this.ruleForm.city = boolean ? this.row.city : ''
      // this.ruleForm.area = boolean ? this.row.area : ''
      // this.ruleForm.detailedAddress = boolean ? this.row.detailedAddress : ''
      // this.selectedOptions = boolean
      //   ? Array.of(
      //       TextToCode[this.ruleForm.province],
      //       TextToCode[this.ruleForm.city],
      //       TextToCode[this.ruleForm.area]
      //     )
      //   : []
      if (boolean) {
        // 下载图片
        getDownUrl({
          fileName: this.ruleForm.headPortrait
        }).then(res => {
          this.fileList.push({ name: this.ruleForm.headPortrait, url: res.data.url.split("?")[0] })
        })
      } else {
        this.fileList = []
      }
    },
    // 子组件传值
    onChangeImageKey(fileName, type, isDetele, url) {
      this.ruleForm.headPortrait = fileName
    },
    // 选择地址
    // onHandleChange(value) {
    //   this.ruleForm.province = CodeToText[value[0]]
    //   this.ruleForm.city = CodeToText[value[1]]
    //   this.ruleForm.area = CodeToText[value[2]]
    // },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.row.id) {
            // 编辑
            getModularUpdate(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '编辑成功'
              })
              this.onRefresh()
            })
          } else {
            // 新增
            getModularCreate(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '创建成功'
              })
              this.onRefresh()
            })
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false, isRefresh: false }
      this.$emit('onCancelBtn', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onCancelBtn', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.course-template {
  height: 100%;
  .el-form {
    width: 100%;
    .el-cascader {
      width: 100%;
      line-height: 30px;
    }
    .dialog-footer {
      @include row;
      justify-content: flex-end;
      margin-top: 22px;
    }
  }
}
</style>